<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Voice Notepad - Speech to Text with Google Speech Recognition</title>
    <meta name="description"
          content="Looking for a free alternative to Dragon Naturally speaking for speech recognition? Voice Notepad lets you type with your voice in any language.">
    <meta property="og:url" content="index.html">
    <meta property="og:image" content="images/languages.jpg">
    <meta property="og:type" content="website">
    <meta name="twitter:image" content="images/languages.jpg">
    <meta name="twitter:url" content="index.html">
    <meta name="twitter:title" content="Voice Dictation - Type with your voice using Google Speech Recognition">
    <meta name="twitter:creator" content="@oathanrex">
    <link rel="icon" type="image/png" sizes="192x192" href="android-icon-192x192.png">
    <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="96x96" href="favicon-96x96.png">
    <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
    <link rel="stylesheet" href="https://oathanrex.github.io/stt/css/1598275350397.css">
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,600,700" rel="stylesheet"
          type="text/css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.7/quill.snow.css" rel="stylesheet">
    <style>
        /* Keyframes for spin animation */
        @-webkit-keyframes spin {
            0% {
                -webkit-transform: rotate(0deg);
                -ms-transform: rotate(0deg);
                transform: rotate(0deg);
            }

            to {
                -webkit-transform: rotate(360deg);
                -ms-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }

        @keyframes spin {
            0% {
                -webkit-transform: rotate(0deg);
                -ms-transform: rotate(0deg);
                transform: rotate(0deg);
            }

            to {
                -webkit-transform: rotate(360deg);
                -ms-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }

        /* Wait wrapper */
        #wait-wrapper {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1000;
        }

        /* Wait animation */
        #wait,
        #wait:after,
        #wait:before {
            border-radius: 50%;
            border: 3px solid transparent;
        }

        #wait {
            display: block;
            width: 150px;
            height: 150px;
            margin: -75px 0 0 -75px;
            z-index: 1001;
            position: relative;
            left: 50%;
            top: 50%;
            border-top-color: #3498db;
            -webkit-animation: spin 2s linear infinite;
            animation: spin 2s linear infinite;
        }

        #wait:after,
        #wait:before {
            content: "";
            position: absolute;
            top: 5px;
            left: 5px;
            right: 5px;
            bottom: 5px;
            -webkit-animation: spin 3s linear infinite;
            animation: spin 3s linear infinite;
        }

        #wait:after {
            top: 15px;
            left: 15px;
            right: 15px;
            bottom: 15px;
            -webkit-animation: spin 1.5s linear infinite;
            animation: spin 1.5s linear infinite;
        }

        /* Wait sections */
        #wait-wrapper .wait-section {
            position: fixed;
            top: 0;
            width: 51%;
            height: 100%;
            background: #222;
            z-index: 1000;
            -webkit-transform: translateX(0);
            -ms-transform: translateX(0);
            transform: translateX(0);
        }

        #wait-wrapper .wait-section.section-left {
            left: 0;
        }

        #wait-wrapper .wait-section.section-right {
            right: 0;
        }

        /* Loaded state animations */
        .loaded #wait-wrapper .wait-section.section-left,
        .loaded #wait-wrapper .wait-section.section-right {
            -webkit-transform: translateX(-100%);
            -ms-transform: translateX(-100%);
            transform: translateX(-100%);
            -webkit-transition: all 0.7s 0.3s cubic-bezier(.645, .045, .355, 1);
            transition: all 0.7s 0.3s cubic-bezier(.645, .045, .355, 1);
        }

        .loaded #wait-wrapper .wait-section.section-right {
            -webkit-transform: translateX(100%);
            -ms-transform: translateX(100%);
            transform: translateX(100%);
        }

        .loaded #wait {
            opacity: 0;
            -webkit-transition: all 0.3s ease-out;
            transition: all 0.3s ease-out;
        }

        .loaded #wait-wrapper {
            visibility: hidden;
            -webkit-transform: translateY(-100%);
            -ms-transform: translateY(-100%);
            transform: translateY(-100%);
            -webkit-transition: all 0.3s 1s ease-out;
            transition: all 0.3s 1s ease-out;
        }

        .no-js #wait-wrapper {
            display: none;
        }
    </style>
</head>

<body data-smooth-scroll-offset="77">
<div id="wait-wrapper">
    <div id="wait"></div>
    <div class="wait-section section-left"></div>
    <div class="wait-section section-right"></div>
</div>
<div class="main-container">
    <section class="switchable switchable--switch bg--primary space--sm">
        <div class="container">
            <div class="row" id="dictation">
                <div class="col-lg-offset-1 col-lg-4 col-md-4 col-sm-4 col-xs-12">
                    <div class="input-select chrome langdd mt--2">
                        <select name="lang" id="lang" onchange="dictation('lang')">
                            <option value selected="selected" disabled="disabled">Choose your Language</option>
                        </select>
                    </div>
                    <div class="commands"></div>
                    <div class="text-block mt--1">
                        <p class="log"><span>Click the microphone icon and speak</span> <img
                                src="https://oathanrex.github.io/stt/images/mic.svg" class="bars"></p>
                    </div>
                    <div class="text-block mt--2 teaser hidden-xs"></div>
                </div>
                <div class="col-lg-7 col-md-8 col-sm-8 col-xs-12">
                    <div class="notepad">
                        <div id="toolbar" class="hidden-xs"><span class="ql-formats"><button class="ql-bold"></button> <button
                                class="ql-italic"></button> <button class="ql-underline"></button> </span><span
                                class="ql-formats"><select class="ql-color"></select> <select
                                class="ql-background"></select> <select class="ql-align"></select> </span>
                            <span class="ql-formats hidden-xs">
                  <button class="ql-list" value="ordered"></button>
                  <button class="ql-list" value="bullet"></button>
                  <button class="ql-indent" value="-1"></button>
                  <button class="ql-indent" value="+1"></button>
                </span><span class="ql-formats"><button class="ql-direction" value="rtl"></button> <button
                                    class="ql-clean"></button></span>
                        </div>
                        <div id="speech"></div>
                        <div class="action-buttons">
                            <div class="left chrome"><a href="#" class="btn-mic btn btn--primary-1"><span
                                    class="btn__text listen">Start</span>
                                <div class="loading-indicator hide"></div>
                            </a></div>
                            <div class="right btn-group"><a data-tooltip="Copy text to Clipboard" href="#"
                                                            class="btn btn--sm btn--primary btn-clipboard"><span
                                    class="btn__text btn__copy">Copy</span> </a><a
                                    data-tooltip="Download File as Plain Text" href="#"
                                    onclick="dictation('save');return false;" class="btn btn--sm btn-save btn--primary"><span
                                    class="btn__text">Save</span> </a>
                                <a data-tooltip="Publish your note online" href="#"
                                   onclick="dictation('gist');return false;"
                                   class="btn btn--sm btn-save btn--primary"><span class="btn__text">Publish</span> </a><a
                                        data-tooltip="Share on Twitter" target="_blank"
                                        href="https://twitter.com/intent/tweet?related=OathanRex&amp;text=I%20%e2%9d%a4%20oatanrex.github.io%20for%20voice%20typing&amp;via=oathanrex&amp;url=https://oathanrex.blogspot.com"
                                        class="btn btn--sm btn-save btn--primary"><span class="btn__text">Tweet</span>
                                </a>
                                <a data-tooltip="Text to Speech" href="#" onclick="dictation('play');return false;"
                                   class="btn btn--sm btn--primary btn-tts-parent"><span class="btn__tefxt">Play</span>
                                </a><a data-tooltip="Email This" target="_blank" href="mailto:?body="
                                       onclick="dictation('mail')"
                                       class="btn btn--sm btn-clear btn--primary btn-mail"><span
                                        class="btn__text">Email</span> </a>
                                <a data-tooltip="Save as PDF, or Print" href="#"
                                   onclick="dictation('print');return false;"
                                   class="btn btn--sm btn-clear btn--primary"><span class="btn__text">Print</span>
                                </a><a data-tooltip="Clear Dictation Notepad" href="#"
                                       onclick="dictation('clear');return false;"
                                       class="btn btn--sm btn-clear btn--primary"><span
                                        class="btn__text">Clear</span></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
<div class="hidden">
    <div class="modal-instance"><a class="btn modal-trigger nochrome" href="#"><span
            class="btn__text">Google Chrome</span></a>
        <div class="modal-container">
            <div class="modal-content">
                <div class="boxed boxed--lg text-center">
                    <h3>Google Chrome Required</h3>
                    <p class="lead">Please open inside <a href="https://www.google.com/chrome/" target="_blank">Google
                        Chrome</a> to use speech recognition.</p><img
                        src="https://oathanrex.github.io/stt/images/chrome.jpg" alt="Google Chrome">
                </div>
            </div>
        </div>
    </div>
    <div class="modal-instance"><a class="btn modal-trigger nomic" href="#"><span
            class="btn__text">Allow Microphone</span></a>
        <div class="modal-container">
            <div class="modal-content">
                <div class="boxed boxed--lg text-center">
                    <h3>Cannot Access Microphone</h3>
                    <p class="lead">Please follow <a href="help.html#mic" target="_blank">this guide</a> for
                        instructions on how to unblock your microphone.</p><img
                        src="https://oathanrex.github.io/stt/images/unblock-microphone.png" width="604" height="364">
                </div>
            </div>
        </div>
    </div>
    <div class="modal-instance"><a class="btn modal-trigger gist" href="#"><span class="btn__text">Publish Online</span></a>
        <div class="modal-container">
            <div class="modal-content">
                <div class="boxed boxed--lg text-center">
                    <p class="lead publishing">Speech to Text is now publishing your note online. Please wait..</p>
                    <p class="lead published hidden"></p>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-instance"><a class="btn modal-trigger tts" href="#"><span class="btn__text">Text to Speech</span></a>
        <div class="modal-container">
            <div class="modal-content">
                <div class="boxed boxed--lg">
                    <p class="lead">Speed is the rate at which the selected voice will speak your transcribed text while
                        the pitch governs how high or low the voice speaks.</p>
                    <div class="row">
                        <div class="col-xs-12 col-sm-4">
                            <label>Voice:</label>
                            <div class="input-select">
                                <select id="voiceselect"></select>
                            </div>
                        </div>
                        <div class="col-xs-12 col-sm-4">
                            <label>Pitch:</label>
                            <div class="input-number">
                                <input type="number" name="pitch" id="pitch" placeholder="Pitch" value="10" min="1"
                                       max="20">
                                <div class="input-number__controls"><span class="input-number__increase"><i
                                        class="stack-up-open"></i> </span><span class="input-number__decrease"><i
                                        class="stack-down-open"></i></span></div>
                            </div>
                        </div>
                        <div class="col-xs-12 col-sm-4">
                            <label>Speed:</label>
                            <div class="input-number">
                                <input type="number" name="rate" id="rate" placeholder="rate" value="10" min="1"
                                       max="20">
                                <div class="input-number__controls"><span class="input-number__increase"><i
                                        class="stack-up-open"></i> </span><span class="input-number__decrease"><i
                                        class="stack-down-open"></i></span></div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-12">
                            <p>
                                <br><a class="btn btn--primary type--uppercase" href="#"
                                       onclick="dictation('tts');return false;"><span
                                    class="btn__text btn-tts">Speak </span></a>
                                <a class="btn btn--primary-2 type--uppercase" href="#"
                                   onclick="dictation('reset');return false;"><span class="btn__text">Reset</span></a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<a class="back-to-top inner-link" href="#start" data-scroll-class="100vh:active"><i
        class="stack-interface stack-up-open-big"></i></a>
<script src="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.7/quill.min.js"></script>
<script src="https://oathanrex.github.io/stt/js/1598275350397.js"></script>
</body>
</html>
